<template>
  <div>
    <el-row style="margin-bottom: 10px" :gutter="20">
      <el-col :span="8">
        <div class="channel channel1">
          <div class="title">创建任务数量（个）</div>
          <div class="content">
            <div class="number"><count-to :start-val="0" :end-val="panelData.groupCount" :duration="2600" /></div>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="channel channel2">
          <div class="title">总获取群成员（个）</div>
          <div class="content">
            <div class="number"><count-to :start-val="0" :end-val="panelData.memberCount" :duration="2600" /></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },
  props: { panelData: { type: Object, default: null }},
  data() {
    return {
      // panelImage: require('@/assets/panel.png')
    }
  },
  methods: {
    toPercent(point) {
      let str = Number(point / 100)
      str += '%'
      return str
    }
  }
}
</script>

<style lang="scss" scoped>

.channel{
  padding: 15px;
}
.channel1 {
  background-color: #dde5f3;
}
.channel2 {
  background-color: #d6f1c9;
}
.channel3 {
  background-color: #dde5f3;
}
.channel4 {
  background-color: #fff;
  border-right: 1px solid #c3d2e9;
}
.title{
  position: relative;
  text-indent: 1rem;
  margin-bottom: 10px;
}
.title:before{
position: absolute;
top: 0;
left: 0px;
content: '';
width: 4px;
height: 100%;
background-color: #409eff;
margin-right: 10px;
}
.content{
  text-align: center;
  .number{
  font-weight: 600;
  font-size: 30px;
  margin: 21px 0;
}
.subtitle{
  color: #909399;
  margin-bottom: 10px;
}
}

</style>
